<template>
    <div class="indexPage">
        <div class="indexPageNav">
            <div class="indexPageLeftNav">
                <div class="indexPageNavItem" :class="store.getters.navListType == item.type ? 'selectindexPageNavItem' : ''" v-for="item in navList" :key="item.type" @click="selectNav(item.type)">
                    <img :src="item.selectIcon" v-show="store.getters.navListType == item.type" class="indexPageNavItemIcon icon1" alt="" srcset="" />
                    <img :src="item.icon" v-show="store.getters.navListType != item.type" class="indexPageNavItemIcon icon2" alt="" srcset="" />
                    {{ item.name }}
                </div>
            </div>
            <div class="indexPageRightNav">
                <div class="indexPageNavItem">
                    <img src="@/assets/images/icon/nav8.png" class="indexPageNavItemIcon" alt="" srcset="" />
                    控制台操作指南
                </div>
                <!-- <div class="indexPageNavItem" @click="closeindexrightmask(true)">
                    <img src="@/assets/image/indexPagen6.png" class="indexPageNavItemIcon" alt="" srcset="" />
                    评价
                </div> -->
            </div>
        </div>
        <div class="pageFlexs">
            <!-- <mars3d style="visibility: hidden"></mars3d> -->
            <div style="width: 100%">
                <!-- 总览 -->
                <overview v-show="store.getters.navListType == 1"></overview>
                <!-- 农业资源 -->
                <resource v-show="store.getters.navListType == 2"></resource>
                <!-- 数字农场 -->
                <production v-show="store.getters.navListType == 3"></production>
                <!-- 智能装备 -->
                <smartdevice v-show="store.getters.navListType == 4"></smartdevice>
                <!-- 市场营销 -->
                <marketing v-show="store.getters.navListType == 5"></marketing>
                <!-- 金融中心 -->
                <financial v-show="store.getters.navListType == 6"></financial>
                <!-- 大数据管理 -->
                <bigdata v-show="store.getters.navListType == 7"></bigdata>
            </div>
            <rightItem :navListType="store.getters.navListType" v-if="store.getters.navListType < 4"></rightItem>
            <!-- <rightMask class="rightMaskmodule" :class="indexrightmask ? 'openrightMask' : ''" @closeindexrightmask="closeindexrightmask"></rightMask> -->
        </div>
    </div>
</template>
<script lang="ts" setup>
import mars3d from "@/components/mars3d.vue";
import overview from "./components/overview.vue";
import resource from "./components/resource.vue";
import production from "./components/production.vue";
import smartdevice from "./components/smartdevice.vue";
import marketing from "./components/marketing.vue";
import financial from "./components/financial.vue";
import bigdata from "./components/bigdata.vue";
import rightItem from "./components/rightItem.vue";
// import rightMask from "./components/rightmask.vue";

// import router from "@/router/index";
import { ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
// console.log(router);
const navList = [
    {
        icon: require("@/assets/images/icon/nav1.png"),
        selectIcon: require("@/assets/images/icon/nav11.png"),
        type: 1,
        name: "总览",
    },
    {
        icon: require("@/assets/images/icon/nav2.png"),
        selectIcon: require("@/assets/images/icon/nav22.png"),
        type: 2,
        name: "农业资源",
    },
    {
        icon: require("@/assets/images/icon/nav3.png"),
        selectIcon: require("@/assets/images/icon/nav33.png"),
        type: 3,
        name: "数字农场",
    },
    {
        icon: require("@/assets/images/icon/nav4.png"),
        selectIcon: require("@/assets/images/icon/nav44.png"),
        type: 4,
        name: "智能装备",
    },
    {
        icon: require("@/assets/images/icon/nav5.png"),
        selectIcon: require("@/assets/images/icon/nav55.png"),
        type: 5,
        name: "市场营销",
    },
    {
        icon: require("@/assets/images/icon/nav6.png"),
        selectIcon: require("@/assets/images/icon/nav66.png"),
        type: 6,
        name: "管理中台",
    },
    {
        icon: require("@/assets/images/icon/nav7.png"),
        selectIcon: require("@/assets/images/icon/nav77.png"),
        type: 7,
        name: "开发者",
    },
];
// const navListType = ref(1);
const indexrightmask = ref(false);
const closeindexrightmask = (e: boolean) => {
    indexrightmask.value = e;
};
const selectNav = (e: number) => {
    // navListType.value = e;
    store.commit("setNavListType", e);
};
</script>
<style lang="scss" scoped>
.indexPage {
    position: relative;
    padding-top: 40px;
    .indexPageNav {
        position: fixed;
        top: 50px;
        left: 46px;
        height: 40px;
        width: calc(100% - 46px);
        background: #464c59;
        padding: 0 20px;
        padding-top: 3px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 99;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
        .indexPageLeftNav {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            .indexPageNavItem {
                &:hover {
                    background: #eef0f5;
                    border-radius: 3px 3px 0px 0px;
                    color: #252b3a;
                    .icon1 {
                        display: block !important;
                    }
                    .icon2 {
                        display: none !important;
                    }
                }
            }
        }
        .indexPageNavItem {
            // width: 96px;
            padding: 0 24px;
            height: 37px;
            font-size: 14px;
            color: #adb0b8;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-left: 1px solid #464c59;
            border-right: 1px solid #464c59;

            .indexPageNavItemIcon {
                width: 16px;
                height: 16px;
                margin-right: 5px;
            }
        }
        .selectindexPageNavItem {
            background: #eef0f5;
            border-radius: 3px 3px 0px 0px;
            color: #252b3a;
        }
    }
    .pageFlexs {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        // padding-top: 40px;
    }
    .indexPageRightNav {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
}
.rightMaskmodule {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    z-index: 999;
    transition: all 0.5s;
}
.openrightMask {
    right: 0;
}
</style>
